<template>
  <el-row :gutter="20">
    <el-col :span="12" style="padding: 13px 15px"
      ><el-button
        type="primary"
        v-if="!addHide"
        v-acl="{ points: [acls.getMenuAcl(addCode || 'post', null)] }"
        @click="emits('add')"
        :icon="Plus"
        >新增</el-button
      ><el-button
        type="danger"
        v-acl="{ points: [acls.getMenuAcl(delCode || 'delete_many', null)] }"
        v-if="!delHide"
        :icon="Delete"
        @click="emits('del')"
        >全部删除</el-button
      >

      <el-dropdown style="margin-left: 20px" v-if="buttons?.length">
        <el-button type="primary">
          {{ buttonsTitle || "更多"
          }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="(button, i) in buttons" :key="i">
              <el-button
                v-acl="{ points: [acls.getMenuAcl(button.code, null)] }"
                :icon="button.icon"
                @click="button.click"
                link
                size="default"
                >{{ button.title }}</el-button
              >
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="12" style="padding: 13px 15px; text-align: right">
      <el-button :icon="Refresh" @click="emits('refresh')" v-if="!refHide" />
      <el-dropdown :hide-on-click="false" trigger="click">
        <el-button
          :icon="Grid"
          style="border-top-right-radius: 0; border-bottom-right-radius: 0"
        />
        <template #dropdown>
          <el-dropdown-menu>
            <template v-for="drop in column" :key="drop.value">
              <el-dropdown-item v-if="acls.can(drop.acl)"
                ><el-checkbox
                  :checked="drop.checked"
                  :label="drop.label"
                  size="small"
                  @change="emits('change', $event, drop)"
              /></el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template> </el-dropdown
    ></el-col>
  </el-row>
</template>

<script lang="ts" setup name="lc-st-button">
import {
  ElRow,
  ElCol,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElIcon,
  ElButton,
  ElCheckbox
} from "element-plus";
import { useAclHooks } from "@/core/pinia/store/acl.store";
import {
  Refresh,
  Plus,
  Delete,
  Grid,
  ArrowDown
} from "@element-plus/icons-vue";
import { TOporaterOption } from "../interface";
import { acl } from "@/directives/index";
defineOptions({
  directives: { acl }
});
defineProps<TOporaterOption>();
const acls = useAclHooks();
const emits = defineEmits(["change", "refresh", "del", "add"]);
</script>

<style></style>
../interface ../interface
